<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>修改密码</title>
    <base href="/">

    <link rel="shortcut icon" href="assets/media/image/favicon.png"/>
    <link rel="stylesheet" href="vendors/bundle.css" type="text/css">
    <link rel="stylesheet" href="vendors/datepicker/daterangepicker.css">
    <link rel="stylesheet" href="vendors/vmap/jqvmap.min.css">
    <link rel="stylesheet" href="assets/css/app.css" type="text/css">
    <!--弹窗CSS-->
    <link rel="stylesheet" href="assets/css/modal.css" type="text/css">

</head>
<body class="container">

<div class="preloader">
    <div class="preloader-icon"></div>
</div>

<!--引入公共头部页面-->
<div th:replace="~{commons/header :: header}"></div>

<!-- begin::main -->
<div id="main">

    <!--引入公共导航栏页面-->
    <div th:replace="~{commons/navigation :: navigation}"></div>

    <div class="main-content">
        <div class="row">
            <div class="col-md-10 card" style="margin-left: 15px">
                <form onsubmit="return false" id="form0" style="margin-top: 50px;margin-bottom: 50px;font-size: 115%">

                    <input th:value="${user.id}" name="id" type="hidden">
                    <div class="form-group row">
                        <label for="username" class="col-sm-4 col-form-label text-right">用户名</label>
                        <div>
                            <input th:value="${user.username}" name="username" readonly type="email"
                                   class="form-control" id="username"
                                   style="border-radius: .30em;">
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="name" class="col-sm-4 col-form-label text-right">姓名</label>
                        <div>
                            <input th:value="${user.name}" name="name" readonly type="text" class="form-control"
                                   id="name"
                                   style="border-radius: .30em;">
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="old_password" class="col-sm-4 col-form-label text-right">旧密码</label>
                        <div>
                            <input name="old_password" type="password" class="form-control" id="old_password"
                                   style="border-radius: .30em;">
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="password" class="col-sm-4 col-form-label text-right">新密码</label>
                        <div>
                            <input name="pwd" type="password" class="form-control" id="password"
                                   style="border-radius: .30em;">
                        </div>
                        <div id="comfirm1" hidden style="line-height: 36px; color: red">密码过于简单</div>
                    </div>

                    <div class="form-group row">
                        <label for="confirm_password" class="col-sm-4 col-form-label text-right">确认密码</label>
                        <div>
                            <input name="confirm_password" type="password" class="form-control" id="confirm_password"
                                   style="border-radius: .30em;">
                        </div>
                        <div id="comfirm2" hidden style="line-height: 36px; color: red">两次输入的密码不一致</div>
                    </div>
                    <br>

                    <div class="form-group row">
                        <div class="col-sm-5 text-right">
                            <button id="submit" type="submit" class="btn btn-primary" style="border-radius: .30em;">修改
                            </button>
                        </div>
                        <div class="col-sm-3 text-right">
                            <a th:href="${#request.getHeader('Referer')}" type="submit" class="btn btn-gradient-dark"
                               style="border-radius: .30em;">取消
                            </a>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!--引入公共的JavaScript脚本-->
        <div th:replace="~{commons/footer :: footer}"></div>
    </div>
</div>

<!--引入公共的JavaScript脚本-->
<div th:include="~{commons/scripts :: scripts}"></div>
<script src="assets/js/app.js"></script>
<script src="assets/js/modal.js"></script>
<script th:inline="javascript">
    $(() => {
        /**
         * 新密码输入框
         */
        $('#password').on('input', function () {
            let value = this.value
            if (/^.{0,6}$/g.test(value)) {
                $('#comfirm1').text('密码长度不能小于6');
                $('#comfirm1').removeAttr("hidden");
            } else if (/^[0-9]{6,}$/g.test(value)) {
                $('#comfirm1').text('密码不能使用纯数字');
                $('#comfirm1').removeAttr("hidden");
            } else {
                document.getElementById("comfirm1").hidden = true;
            }
        })
        /**
         * 确认密码输入框
         */

        $('#confirm_password').on('input', function () {
            let value1 = $('#password').val().trimEnd()
            let value2 = this.value;
            if (value1 != value2) {
                $('#comfirm2').removeAttr("hidden");
            } else {
                $("#comfirm2").attr("hidden", "hidden");
            }
        })

        $('#form0').submit(function (ev) {
            let data = $(this).serializeArray();
            let url = "/user/passwordModify"
            let content;
            let result = Function();
            let flag = 0;

            if ($('#old_password').val().trim() == '') {
                content = "请输入旧密码";
                flag = 1;
            } else if ($('#password').val().trim() == '') {
                content = "请输入新密码";
                flag = 1;
            } else if ($('#confirm_password').val().trim() == '') {
                content = "请输入确认密码";
                flag = 1;
            } else if (!$('#comfirm1')[0].hasAttribute("hidden")) {
                content = "密码不符合规则";
                flag = 1;
            } else if (!$('#comfirm2')[0].hasAttribute("hidden")) {
                content = "两次输入的密码不一致";
                flag = 1;
            }
            if (flag === 1) {
                let mModal1 = new mModal({
                    title: "提示", // 标题，默认：提示
                    width: "25%", // 弹出框宽度，默认 25%
                    top: "25vh", // 距离可视区域顶部距离 CSS中 margin-top 值
                    content: content, // 正文，默认：正文内容
                    cancelText: "取 消", // 取消按钮文本
                    confirmText: "确 定", // 确定按钮文本
                    showCancelButton: false, // 是否显示取消按钮
                    showConfirmButton: true, // 是否显示确定按钮
                    showClose: true, // 是否显示关闭按钮
                    modal: true, // 是否需要遮罩层
                    customClass: "", // 自定义类名confirm
                    confirm: function () {
                        result();
                        mModal1.close();
                    }
                });
                mModal1.renderDom();
            } else {
                $.post(url, data, function (data) {
                    console.log(data);
                    if (data.code >= 0) {
                        content = "修改成功";
                        result = function () {
                            window.location.href = /*[[${#request.getHeader('Referer')}]]*/"/user/query"
                        };
                    } else {
                        content = "密码错误";
                    }
                    //弹窗
                    let mModal1 = new mModal({
                        title: "提示", // 标题，默认：提示
                        width: "25%", // 弹出框宽度，默认 25%
                        top: "25vh", // 距离可视区域顶部距离 CSS中 margin-top 值
                        content: content, // 正文，默认：正文内容
                        cancelText: "取 消", // 取消按钮文本
                        confirmText: "确 定", // 确定按钮文本
                        showCancelButton: false, // 是否显示取消按钮
                        showConfirmButton: true, // 是否显示确定按钮
                        showClose: true, // 是否显示关闭按钮
                        modal: true, // 是否需要遮罩层
                        customClass: "", // 自定义类名confirm
                        confirm: function () {
                            result();
                            mModal1.close();
                        }
                    });
                    mModal1.renderDom();
                }, "json");
            }
            return false;
        })
    })
</script>
</body>

</html>